<template>
  <div class="together-page">
    <top-header :title="'商务合作'" />
    <div v-for="item of together_list"
         :key="item.id">
      <div class="padding-20 font-size-18">{{ item.name }}</div>
      <div class="display together-card">
        <div class="together-card-content font-size-16">
          <div class="display">
            <div class="together-card-icon__tel display-center">
              <img src="@/assets/image/shouyji@3x.png" />
            </div>
            <div class="font-size-16 font-color-343434">{{ item.tel }}</div>
          </div>
          <div class="display">
            <div class="together-card-icon__xin display-center">
              <img src="@/assets/image/xin@3x.png"
                   @click="handleCallPhone(item.tel)" />
            </div>
            <div class="font-size-16 font-color-343434">{{ item.email }}</div>
          </div>
        </div>
        <img src="@/assets/image/icon_phone@3x.png"
             class="phone-img" />
      </div>
    </div>
  </div>
</template>

<script>
import TopHeader from '@/components/TopHeader';
import cookie from '@/utils/cookie';
export default {
  name: 'index',
  components: {
    TopHeader,
  },
  data () {
    return {
      together_list: [], //商务合作列表
    };
  },
  mounted () {
    this.getTogetherList();
  },
  methods: {
    getTogetherList () {
      //获取合作商务列表
      _api
        .api_userPortal_sysCooperation_getListByCon({
          town_id: cookie.get('town_id') || 14,
        })
        .then((res) => {
          this.together_list = res.data.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleCallPhone (tel) { //获取打电话
      window.location.href = 'tel://' + tel;
    },
  },
};
</script>

<style lang="scss" scoped>
.together-page {
	min-height: 100vh;
	background-color: #ffffff;
}
.together-card {
	padding: 0 0.483092rem;
}
.together-card-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	div:first-child {
		margin-bottom: 0.072464rem;
	}

	.together-card-icon__tel,
	.together-card-icon__xin {
		margin-right: 0.338164rem;
		width: 0.483092rem;
		height: 0.483092rem;
	}
	.together-card-icon__tel {
		img {
			width: 0.241546rem;
			height: 0.386473rem;
		}
	}
	.together-card-icon__xin {
		img {
			width: 0.338164rem;
			height: 0.289855rem;
		}
	}
}
.phone-img {
	color: #343434;
	padding: 0 0.57971rem;
	border-left: #dde9ff 0.024155rem solid;
	width: 0.652174rem;
	height: 0.652174rem;
}
</style>
